<template>
  <page-layout :title="headContent.orderNo"
               :logo="logo"
               :show-breadcrumb="false">
    <yq-page-head-content ref="pageContent" slot="headerContent" :head-content="headContent" :head-content-columns="headContentColumns"/>
    <yq-page-head-extra ref="pageExtra" slot="extra" :head-content="headContent" :head-extra-columns="headExtraColumns"/>
    <a-divider style="margin: 1px"/>
    <a-divider style="margin: 1px"/>
    <!-- actions -->
    <template slot="action">
      <a-button-group style=" margin-right: 4px;">
        <a-button @click="handleEdit(headContent)">编辑</a-button>
        <a-button>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <a-icon type="ellipsis"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(headContent.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-button>
      </a-button-group>
      <template>
        <a-button type="primary" @click="">变更状态</a-button>
      </template>

      <pp-work-order-modal ref="modalForm" @ok="modalFormOk"/>
    </template>
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="详细资料" >
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}">
          <detail-list title="┃ 基本信息" size="small" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="工单号">{{headContent.orderNo}}</detail-list-item>
            <detail-list-item term="项目名称">{{headContent.projectId_dictText}}</detail-list-item>
            <detail-list-item term="产品编号">{{headContent.materialNo}}</detail-list-item>
            <detail-list-item term="产品描述">{{headContent.materialDesc}}</detail-list-item>
            <detail-list-item term="单位">{{headContent.unit_dictText}}</detail-list-item>
            <detail-list-item term="工单数量">{{headContent.orderQty}}</detail-list-item>
            <detail-list-item term="完工数量">{{headContent.completeQty}}</detail-list-item>
            <detail-list-item term="状态">{{headContent.status_dictText}}</detail-list-item>
            <detail-list-item term="投放日期">{{headContent.putDate}}</detail-list-item>
            <detail-list-item term="工单类型">{{headContent.orderType_dictText}}</detail-list-item>
            <detail-list-item term="施工号">{{headContent.orderId}}</detail-list-item>
            <detail-list-item term="工单来源">{{headContent.sourceType_dictText}}</detail-list-item>
            <detail-list-item term="计划开工期">{{headContent.planStartDate}}</detail-list-item>
            <detail-list-item term="实际开工期">{{headContent.startDate}}</detail-list-item>
            <detail-list-item term="计划完工期">{{headContent.planEndDate}}</detail-list-item>
            <detail-list-item term="实际完工期">{{headContent.endDate}}</detail-list-item>
            <detail-list-item term="入库数量">{{headContent.inQty}}</detail-list-item>
            <detail-list-item term="原工单号">{{headContent.originalOrderNo}}</detail-list-item>
            <detail-list-item term="备注">{{headContent.remark}}</detail-list-item>
          </detail-list>
          <detail-list title="┃ 系统信息" size="small" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="创建人">{{headContent.createBy}}</detail-list-item>
            <detail-list-item term="创建时间">{{headContent.createTime}}</detail-list-item>
            <detail-list-item term="创建部门">{{headContent.sysOrgCode_dictText}}</detail-list-item>
            <detail-list-item term="更新人">{{headContent.updateBy}}</detail-list-item>
            <detail-list-item term="更新时间">{{headContent.updateTime}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="附件">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}">
          <j-upload v-model="headContent.file" text="附件上传" @change="uploadFile" biz-path="workOrder" :return-url="false"/>
        </a-card>
      </a-tab-pane>

      <a-tab-pane key="3" tab="加工明细" >
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <pp-work-order-process-table
            ref="ppWorkOrderProcessTable"
            :init-query-param="{workOrderId: this.headContent.id}"
          ></pp-work-order-process-table>
        </a-card>
      </a-tab-pane>

      <a-tab-pane key="4" tab="汇报单" >
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <pp-work-order-report-table
            ref="ppWorkOrderReportTable"
            :init-query-param="{workOrderId: this.headContent.id}"
          ></pp-work-order-report-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="5" tab="材料需求" v-if="hasPermissionTab('quoteProject:partsTab')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <pp-work-order-req-table
            ref="ppWorkOrderReqTable"
            :init-query-param="{workOrderId: this.headContent.id}"
          ></pp-work-order-req-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="6" tab="领料单">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          &nbsp;&nbsp;&nbsp;开发中...
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="7" tab="产品BOM">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          &nbsp;&nbsp;&nbsp;开发中...
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="8" tab="产品工艺">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          &nbsp;&nbsp;&nbsp;开发中...
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </page-layout>
</template>

<script>
import {mixinDevice} from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import {deleteAction, getAction, putAction} from "@/api/manage";
import PpWorkOrderModal from './PpWorkOrderModal.vue'
import DetailList from "@/components/tools/DetailList";
import Area from '@/components/_util/Area'
import {hasPermissionTab} from "@/utils/util";
import PpWorkOrderProcessTable from '@/views/ebc/pp/workOrderProcess/PpWorkOrderProcessTable.vue'
import PpWorkOrderReportTable from '@/views/ebc/pp/workOrderReport/PpWorkOrderReportTable.vue'
import PpWorkOrderReqTable from '@/views/ebc/pp/workOrderReq/PpWorkOrderReqTable.vue'

const DetailListItem = DetailList.Item
export default {
  name: "PpWorkOrderDetail",
  components: {
    PageLayout,
    DetailList,
    DetailListItem,
    PpWorkOrderModal,
    PpWorkOrderProcessTable,
    PpWorkOrderReportTable,
    PpWorkOrderReqTable
  },
  mixins: [mixinDevice],
  created() {
    this.pcaData = new Area()
  },
  data() {
    return {
      headContent: {},
      defaultActiveKey: '1',
      headContentColumns: [
        {
          title: '项目',
          dataIndex: 'projectId_dictText',
          len: 7,
        },
        {
          title: '产品描述',
          dataIndex: 'materialDesc',
          len: 7,
        },
        {
          title: '施工号',
          dataIndex: 'orderId',
          len: 7,
        },
        {
          title: '投放日期',
          dataIndex: 'putDate',
          len: 7,
        },
      ],
      headExtraColumns: [
        {
          title: '状态',
          dataIndex: 'status_dictText',
        },
      ],
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      labelCol2: {
        xs: {span: 24},
        sm: {span: 3},
      },
      wrapperCol2: {
        xs: {span: 24},
        sm: {span: 20},
      },
      url: {
        list: "/pp/workOrder/list",
        edit: "/pp/workOrder/edit",
        delete: "/pp/workOrder/delete",
      },
      logo: require('@/views/ebc/assets/产品图标.png'),
      pcaData: '',
    }
  },
  methods: {
    edit(record) {
      this.headContent = record;
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleDelete: function (id) {
      if (!this.url.delete) {
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      deleteAction(that.url.delete, {id: id}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit('detailDel');
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    callback(key) {
    },
    modalFormOk: function () {
      // 刷新详情页
      this.detailFresh();
      // 详情页更新通知
      this.$emit('detailOk');
    },
    detailFresh() {
      let that = this;
      getAction(that.url.list, {id: that.headContent.id}).then((res) => {
        if (res.success) {
          let record = (res.result.records)[0];
          if (record) {
            that.headContent = record;
          }
        } else {
          that.$message.warning(res.message);
        }
      })
    },
    uploadFile(newFileList){
      if(!this.headContent.id){
        this.$message.warning('数据异常，ID不存在')
        return;
      }
      putAction(this.url.edit,{id: this.headContent.id, file: newFileList}).then((res)=>{
        if(res.success){
          this.$message.success("成功！");
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    hasPermissionTab(val){
      return hasPermissionTab(val);
    }
  },
}
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 2px;
}

.text {
  color: rgba(0, 0, 0, .45);
  text-align: center;
}

.contentText {
  color: rgba(0, 0, 0, .45);
  font-size: 13px;
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
  text-align: center;
}

.contentHeading {
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }

  .text {

  }

  .status-list {
    text-align: left;
  }

  .term {
    color: rgba(0,0,0,.85);
    display: table-cell;
    line-height: 20px;
    margin-right: 8px;
    padding-bottom: 16px;
    white-space: nowrap;

    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -.5px;
    }
  }

  .content {
    color: rgba(0,0,0,.65);
    display: table-cell;
    line-height: 22px;
    padding-bottom: 16px;
    width: 100%;
  }

}
</style>